<template>
	<div class="scroll-view-demo0">
		<ynet-scroll-view
			ref="scrollView"
			:scrolling-x="false"
			@scroll="$_onScroll"
		>
			<div v-for="i in list" class="scroll-view-item" :key="i" @click="$_onItemClick(i)">{{i}}</div>
		</ynet-scroll-view>
	</div>
</template>
<script>
	import { ScrollView } from 'ynet-mobile'
	export default {
		title: '基础',
		name: 'scroll-view-demo',
		components: {
			[ScrollView.name]: ScrollView
		},
		data(){
			return {
				list: 5
			}
		},
		methods: {
			$_onItemClick(i){
				console.log(`Click ${i}`)
				this.addItems()
				// 如果把autoReflow设置为false, 需调用reflowScroller
				this.$refs.scrollView.reflowScroller()
			},
			$_onScroll({scrollLeft, scrollTop}){
				console.log(`[ynet Mobile ScrollView - onScroll] scrollLeft: ${scrollLeft}, scrollTop: ${scrollTop}`)
			},
			addItems(){
				this.list += 5
			}
		}
	}
</script>
<style lang="scss">
.scroll-view-demo0{
	height: 4.6rem;
	.scroll-view-item{
		padding: 30px 0;
		text-align: center;
		font-size: 28px;
		border-bottom: .5px solid #efefef;
	}
}

</style>